<template>
  <div>
    <el-form :model="detailForm" ref="detailForm" :label-position="labelPosition" class="el-form">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="header-card">
          <span class="header-card-title">上传购置信息</span>
        </div>

        <el-row :gutter="24">
          <el-col>
            <el-table size="mini" :data="detailForm.dtoList" border style="width: 100%"
                      :header-cell-class-name="headerClass" v-if="detailForm.dtoList">
              <el-table-column align="center" label="操作"  width="120">
                <template #default="{row,$index}">
                  <el-button size="mini" type="text" @click="handleEdit(row,$index)">
                    编辑
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="车型" prop="modelName"/>
              <el-table-column align="center" label="车架号" width="200" prop="vinNo"/>
              <el-table-column align="center" label="购置税发票" prop="invoiceUrl" width="200">
                <template #default="{row,$index}">
                  <el-popover placement="right" width="200" trigger="click">
                    <image-common v-model="row.invoiceUrl" :disabled="!isEdit" :limit="1" :up-type="2"/>
                    <el-button type="text" slot="reference">
                      {{ row.invoiceUrl ? '查看' : '上传' }}
                    </el-button>

                  </el-popover>
                  <span v-if="row.bool" style="color: red;padding-left: 20px">请上传发票</span>
                </template>
              </el-table-column>

            </el-table>
          </el-col>

        </el-row>

      </el-card>
    </el-form>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="35%" top="5px">
      <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="车架号:">
              <span>{{ ruleForm.vinNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车型:">
              <span>{{ ruleForm.modelName }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="购置税发票:" prop="invoiceUrl">
              <image-common v-model="ruleForm.invoiceUrl" :limit="20" :disabled="!isEdit" :upType="2"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleCancelOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "uploadPurchase",
  model: {
    prop: "detailForm",
    event: "update:detailForm",
  },

  props: {
    detailForm: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      title: "",
      dialogFormVisible: false,
      ruleForm: {
        vinNo: "",
        modelName: "",
        annexUrl: "",
        index: 0,
      },
      rules: {
        invoiceUrl: [
          {required: true, message: "请上传购置税发票", trigger: "blur"},
        ],
      },
      rulesUrl: {},
      headerList: ["invoiceUrl"],
    };
  },
  computed: {
    labelPosition() {
      if (this.isEdit) {
        return "top";
      } else {
        return "left";
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },
  watch: {
    "detailForm.dtoList": {
      handler(val) {
        if (val) {
          val.forEach((item, index) => {
            if (item.invoiceUrl) {
              this.$set(this.detailForm.dtoList[index], "bool", false);
            }
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
  },
  mounted() {
  },
  methods: {
    headerClass({row, column, rowIndex, columnIndex}) {
      for (let i = 0; i < row.length; i++) {
        if (this.headerList.includes(row[i].property) && i == columnIndex) {
          return "header-class";
        }
      }
    },

    //编辑
    handleEdit(row, index) {
      this.title = "编辑";
      this.dialogFormVisible = true;
      this.ruleForm = row
      this.index = index;
    },

    //查看
    handleView(row) {
      this.title = "查看";
      this.dialogFormVisible = true;
      this.ruleForm = row
    },

    //取消
    handleCancel() {
      this.dialogFormVisible = false;
    },

    //确定
    handleCancelOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.detailForm.dtoList[this.index].invoiceUrl =
              this.ruleForm.invoiceUrl;
          this.dialogFormVisible = false;
        }
      });
    },

    valid() {
      return new Promise((resolve) => {
        let boole;
        this.detailForm.dtoList.forEach((item, index) => {
          if (item.invoiceUrl) {
            this.$set(this.detailForm.dtoList[index], "bool", false);
          } else {
            this.$set(this.detailForm.dtoList[index], "bool", true);
          }
        });
        boole =  this.detailForm.dtoList.every(item=> item.bool === false)
        if (boole) {
          resolve(true);
        } else {
          resolve(false);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

.box-card {
  font-size: 14px;
  margin-bottom: 16px;
}

.el-form-item {
  width: 70%;
}

::v-deep.component-upload-image {
  margin-left: 25px !important;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}
</style>


